<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="客户姓名" prop="userName">
        <el-input
          v-model="queryParams.userName"
          placeholder="请输入客户姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="客户公司" prop="myCompany">
        <el-input
          v-model="queryParams.myCompany"
          placeholder="请输入客户公司名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="纳税类型" prop="taxPaymentType">
        <el-select v-model="queryParams.taxPaymentType" placeholder="选择纳税类型">
          <el-option v-for="(status,index) in status" :key="index" :label="status" :value="status"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
<!--    <el-row :gutter="10" class="mb8">-->
<!--      <el-col :span="1.5">-->
<!--        <el-button-->
<!--          type="primary"-->
<!--          plain-->
<!--          icon="el-icon-plus"-->
<!--          size="mini"-->
<!--          @click="handleAdd"-->
<!--        >添加客户信息-->
<!--        </el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->
    <el-table :data="tableList" style="width: 100%;margin-top: 20px" border>
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" class="demo-table-expand">
            <el-form-item label="公司名称：">
              <span>{{ props.row.myCompany }}</span>
            </el-form-item>
            <el-form-item label="服务项目：">
              <span>{{ props.row.serviceItem }}</span>
            </el-form-item>
            <el-form-item label="备注：">
              <span>{{ props.row.details }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="编号" width="50" align="center" prop="id"/>
      <el-table-column label="客户姓名"  align="center" prop="userName"/>
      <el-table-column label="客户电话" width="110" align="center" prop="companyPhone"/>
      <el-table-column label="公司名称" width="200" align="center" prop="myCompany"/>
      <el-table-column label="成立时间" align="center" prop="companyCreateTime"/>
      <el-table-column label="纳税类型" align="center" prop="taxPaymentType"/>
      <el-table-column label="财务电话" width="110" align="center" prop="servicePhone"/>
      <el-table-column label="财务顾问" align="center" prop="financialAdviser"/>
      <el-table-column label="代账期限" width="140" align="center" prop="limitTime"/>
      <el-table-column label="服务项目" align="center" prop="serviceItem"/>
      <el-table-column label="缴费总金额" align="center" prop="priceAmount"/>
      <el-table-column label="新增缴费订单" align="center" fixed="right"  class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-document-checked"
            @click="handleAddOrder(scope.row)"
          >添加订单
          </el-button>
        </template>
      </el-table-column>

      <el-table-column label="操作" fixed="right" width="150" align="center" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
          >编辑
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      v-show="total>0"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[2, 4, 6, 8]"
      :page-size="queryParams.pageSize"
      :current-page="queryParams.pageNum"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加或修改线索列表对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" @close="resetForm('form')" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="客户电话" prop="companyPhone">
              <el-input v-model="form.companyPhone" placeholder="请输入客户电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户姓名" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入客户姓名"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="公司名称" prop="myCompany"
            >
              <el-input v-model="form.myCompany" placeholder="请输入公司名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="成立时间" prop="companyCreateTime">
              <el-input v-model="form.companyCreateTime" placeholder="请输入成立时间"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="纳税类型" prop="taxPaymentType">
              <el-select v-model="form.taxPaymentType" placeholder="选择纳税类型">
                <el-option v-for="(status,index) in status" :key="index" :label="status" :value="status"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="代账期限" prop="limitTime">
              <el-date-picker
                v-model="limitTime"
                type="monthrange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始月份"
                end-placeholder="结束月份"
                format="yyyy年MM月"
                value-format="yyyy-MM"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务项目" prop="serviceItem">
              <el-input v-model="form.serviceItem" placeholder="请输入服务项目"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="缴费总额" prop="priceAmount">
              <el-input-number v-model="form.priceAmount" :precision="2" placeholder="请输入缴费总额（单位/元）"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="财务电话" prop="servicePhone">
              <el-input v-model="form.servicePhone" placeholder="请输入客服电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="财务顾问" prop="financialAdviser">
              <el-input v-model="form.financialAdviser" placeholder="请输入财务顾问"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="details">
              <el-input v-model="form.details" type="textarea" placeholder="备注信息"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :title="title" :visible.sync="orderdialog" width="800px" append-to-body>
      <el-form :model="payform" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="收款方" >
              <el-input v-model="payform.payee"  placeholder="请输入收款方"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="公司名称" >
              <el-input v-model="payform.companyName" :disabled="true" placeholder="请输入公司名称"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="服务项目" >
              <el-input v-model="payform.serviceItem" type="textarea" placeholder="请输入服务项目"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="价格" >
              <el-input-number v-model="payform.total" :precision="2" placeholder="请输入价格（单位/元）"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="Ordercancel">取 消</el-button>
        <el-button type="primary" @click="Ordersubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>

export default {
  data() {
    return {
      payform: {},
      orderdialog: false,
      limitTime: '',
      status: ['小规模纳税人', '一般纳税人'],
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 线索列表表格数据
      tableList: [
        {id:1,myCompany:'nias'}
      ],
      form: {},
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        curPage: 1,
        pageSize: 8
      },
      rules: {
        companyPhone: [
          { required: true, message: '请填写客户电话', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '请填写客户姓名', trigger: 'blur' }
        ],
        myCompany: [
          { required: true, message: '请填写公司名称', trigger: 'blur' }
        ],
        companyCreateTime: [
          { required: true, message: '请填写公司创立时间', trigger: 'blur' }
        ],
        taxPaymentType: [
          { required: true, message: '请填写公司的纳税类型', trigger: 'blur' }
        ],
        servicePhone: [
          { required: true, message: '请填写公司财务电话', trigger: 'blur' }
        ],
        financialAdviser: [
          { required: true, message: '请填写公司的财务顾问', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  created() {
    this.getList()
  },
  methods: {
    Ordersubmit() {
      console.log(this.payform)
      this.request({
        url: '/order/addDd',
        method: 'post',
        params: this.payform,
      }).then(response => {
        console.log(response)
        this.$message({
          message: '追加订单成功',
          type: 'success'
        })
        this.orderdialog = false
        this.getList()
      }).catch(error => {
        this.$message({
          message: '添加订单失败',
          type: 'error'
        })
      })
    },
    Ordercancel() {
       this.orderdialog = false
    },
    handleAddOrder(row) {
      this.title = '新增缴费订单'
      this.orderdialog = true
      this.payform.payee = '狄牛网络科技有限公司'
      this.payform.id = row.id
      this.payform.companyName=row.myCompany
      this.payform.wasPaid=0

    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.queryParams.curPage = val
      this.getList()
      console.log(`当前页: ${val}`)
    },
    /** 查询线索列表列表 */
    getList() {
      this.request({
        url: '/user/seleUserData',
        method: 'post',
        params: this.queryParams
      }).then(res => {
        console.log(res)
        this.tableList = res.data
        this.total = res.count
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.form = {}
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.curPage = 1
      console.log(this.queryParams)
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryParams = {
        curPage: 1,
        pageSize: 8
      }
      this.handleQuery()
    },
    /** 新增按钮操作 */
    // handleAdd() {
    //   // this.reset();
    //   this.open = true
    //   this.form = {}
    //   this.title = '添加客户信息'
    // },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.form = row
      this.open = true
      this.title = '修改客户信息'
    },
    handleDelete(row) {
      this.request({
        methods: 'post',
        url: '/user/delete',
        params: {
          wuId: row.id

        }
      }).then(res => {
        console.log(res)
        if (res) {
          this.$message.success('删除成功')
          this.getList()
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.form = {}
      this.limitTime = ''
    },
    /** 提交按钮 */
    submitForm() {
      if (this.limitTime) {
        this.form.limitTime = this.limitTime[0] + '至' + this.limitTime[1]
      }
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id) {
            //修改接口
            this.request({
              url: '/user/edit',
              methods: 'post',
              params: this.form
            }).then(res => {
              if (res) {
                this.$message.success('修改成功')
                this.open = false
                this.getList()
              }
            })
          } else {
            //添加接口
            this.request({
              methods: 'POST',
              url: '/user/add',
              params: this.form
            }).then(res => {
              if (res) {
                this.$message.success('添加成功')
                this.open = false
                this.getList()
              }
            })
          }
        }
      })
    }
  }
}
</script>
